<template>
	<view class="hidden-input" v-html="input"></view>
</template>
<script setup>
	import { nextTick, ref } from 'vue';
	const emits = defineEmits(['change']);
	const style = 'position: fixed;left: 0;top: -200px;outline: none;font-size: 1;';
	const input = ref(`<input type="password" id="hidden_input" autocomplete="off" autocorrect="off" autocapitalize="off" aria-hidden="true" style="${style}">`);
	nextTick(()=>{
		document.addEventListener('click', function(event) {
		  if (!event.target.closest('#hidden_input')) {  
		    document.getElementById('hidden_input') && document.getElementById('hidden_input').focus();  
		  }  
		});  
		document.getElementById('hidden_input').addEventListener('input', function(event) {
			emits('change',this.value);
		  this.value = '';  
		});  
	})
</script>
